<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/load.js"></script>
</head>

<body>
    <div id="container">
        <div id="formcontainer">
            <form class="layui-form layui-form-pane" id="editform" lay-filter="editform">
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">用户ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="userID" id="userID" autocomplete="off" class="layui-input required">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">用户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="userName" autocomplete="off" class="layui-input required">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label required">人脸图像</label>
                            <div class="layui-input-block">
                                <img id="showImg" src="" width="200" height="200" alt="图片 预览..." style="display:none"> <br />
                                <input type="file" name="file" id="file" style="display:none" onchange="FileChange()" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="opcontainer">
            <button class="layui-btn" onclick="HandleChoose()">选择人脸</button>
            <button class="layui-btn" onclick="HandleSave()">确认</button>
            <button class="layui-btn layui-btn-primary" onclick="HandleClose()">关闭</button>
        </div>
    </div>
</body>
<script>
    $(function() {
        $("#userID").val(getNewGuid())
    })

    function HandleSave() {
        SubmitForm('editform', 'face/regist/insert', BeforeSubmit, null, function(result, status) {
            if (result.code == 0) {
                OpenSuccess('注册成功', function(params) {
                    CloseDialog();
                })
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function HandleChoose() {
        document.getElementById("file").click();
    }

    function FileChange() {
        var preview = document.getElementById("showImg");
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            preview.src = reader.result;
            $("#showImg").show();
        }
    }

    function BeforeSubmit(data) {
        var base64Image = $("#showImg").attr("src")
        if (base64Image == "") {
            OpenFailMessage("请选择人脸图像");
            return false;
        } else {
            data["base64Image"] = base64Image;
            return true;
        }
    }

    function HandleClose() {
        CloseDialog();
    }
</script>

</html>